<template>
  <div class="shareDetail" v-if="detailObj && detailObj.author" ref="find">
    <!-- 头部导航 -->
    <hmnavbar path="/find"></hmnavbar>
    <!-- 文章标题 -->
    <h3>{{ detailObj.title }}</h3>
    <!-- 作者信息 -->
    <div class="author">
      <div class="avatar">
        <img :src="baseURL + detailObj.author.avatar" alt="" />
      </div>
      <div class="msg">
        <div class="name">{{ detailObj.author.nickname }}</div>
        <div class="time">{{ detailObj.created_at | hmfilter }}</div>
      </div>
    </div>
    <!-- 文章区域 -->
    <div class="content">
      <div v-html="detailObj.content"></div>
    </div>
    <!-- 评论区域 -->
    <div class="comment">
      <div class="title">
        评论<sup>{{ total }}</sup>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <comment
          :item="item"
          v-for="(item, index) in commentList"
          :key="index"
          @imgclick="openReplayPop"
        ></comment>
      </van-list>
    </div>
    <!-- 书写评论区域 -->
    <div class="bottom">
      <div class="ipt" @click="opencomment">我来补充两句</div>
      <div class="item">
        <i
          :class="{ active: getCollect(id) }"
          @click="collect"
          class="iconfont iconbtn_shoucang_nor"
        ></i>
        <span>{{ detailObj.collect }}</span>
      </div>
      <div class="item">
        <i
          :class="{ active: getStar(id) }"
          @click="star"
          class="iconfont iconicon_dianzanliang"
        ></i>
        <span>{{ detailObj.star }}</span>
      </div>
      <div class="item">
        <i @click="sharePage" class="iconfont iconbtn_share"></i>
        <span>{{ detailObj.share }}</span>
      </div>
    </div>
    <!-- 开启评论面板 -->
    <van-popup v-model="show" position="bottom">
      <div class="mybox">
        <textarea v-model="word" :placeholder="placeholder"></textarea>
        <div class="send">
          <span v-if="word.trim().length === 0">发送</span>
          <span v-else class="active" @click="sendComment">发送</span>
        </div>
      </div>
    </van-popup>
    <!-- 开启分享面板 -->
    <van-popup v-model="shareShow">
      <div class="sharepop">
        <div class="title">
          长按图片下载并分享
        </div>
        <div class="box">
          <div class="pageimg">
            <img :src="pageimg" alt="" />
          </div>
          <div class="logo">
            <img src="../../../assets/img_share_logo@2x.png" alt="" />
          </div>
          <div class="ewm">
            <div id="qrcode" ref="qrcode"></div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import comment from './comment.vue'
import {
  getShareDetailApi,
  getCommentApi,
  setCommentsApi,
  collectApi,
  starApi
} from '@/api/articles.js'
// 导入用于截图的第三方包
import html2canvas from 'html2canvas'
// 导入将地址转为二维码的第三方包
import QRCode from 'qrcodejs2'
export default {
  data () {
    return {
      id: '',
      // 文章详情对象
      detailObj: {},
      baseURL: process.env.VUE_APP_URL,
      loading: false,
      finished: false,
      limit: 5,
      start: -5,
      commentList: [],
      total: 0,
      // 控制评论面板的显示与隐藏
      show: false,
      word: '',
      // textarea 中的默认显示提示信息
      placeholder: '',
      // 控制添加评论&评论回复的标识
      isReply: false,
      // 保存要回复的评论数据对象
      mycomment: {},
      // 控制面板的显示和隐藏
      shareShow: false,
      // 当前页面的截图数据
      pageimg: ''
    }
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['getCollect', 'getStar'])
  },
  methods: {
    // 生成二维码
    getQRCode () {
      // 创建二维码之前需要将之前的二维码清空
      this.$refs.qrcode.innerHTML = ''
      var res = new QRCode('qrcode', {
        width: 72,
        height: 72,
        text: window.location.href
      })
      console.log(res)
    },
    // 打开分享面板
    sharePage () {
      this.shareShow = true
      // 开始截图
      html2canvas(this.$refs.find).then(canvas => {
        // 将图片转为 base64 的字符串
        var img = canvas.toDataURL('image/png')
        // 保存图片
        this.pageimg = img
      })
      setTimeout(() => {
        // 生成二维码
        this.getQRCode()
      }, 1000)
    },
    // 点赞文章 & 取消点赞
    async star () {
      if (!this.$login()) {
        return
      }
      this.$toast.loading('加载中...')
      const res = await starApi(this.id)
      this.detailObj.star = res.data.num
      // 将当前登录的用户信息更新
      this.$store.dispatch('setUserInfo')
      this.$toast.success('操作成功...')
    },
    // 收藏文章 & 取消收藏
    async collect () {
      if (!this.$login()) {
        return
      }
      this.$toast.loading('加载中...')
      const res = await collectApi(this.id)
      console.log(res)
      // res.data.list => 当前登录用户收藏的文章的列表
      // res.data.num => 当前文章被收藏数
      this.detailObj.collect = res.data.num
      // 将当前登录的用户信息更新
      this.$store.dispatch('setUserInfo')
      this.$toast.success('操作成功...')
    },
    openReplayPop (item) {
      // 打开回复的评论面板
      this.show = true
      // 显示回复内容
      this.placeholder = `回复: ${item.author.nickname}`
      // 将标识设置为 true：表示此时需要添加回复
      this.isReply = true
      // 将需要回复的评论数据保存起来
      this.mycomment = item
    },
    // 添加评论
    async sendComment () {
      // 判断用户是否登录
      if (!this.$store.state.isLogin) {
        // 提示用户未登录
        this.$toast.fail('对不起，您还未登录')
        // 跳转到登录页面  记录当前访问的页面 this.$route.fullPath
        this.$router.push(`/login?_redirect=${this.$route.fullPath}`)
        // 未登录
        return
      }
      // 添加评论
      if (this.isReply === false) {
        // 得到当前输入的评论内容: this.word
        // 得到当前的文章 id ： this.id
        // 将数据提交到服务器：
        const res = await setCommentsApi({
          content: this.word,
          article: this.id
        })
        // res.data：就是添加的新的评论数据
        // 由于后台接口没有返回点赞数据，我们可以自动添加一个
        res.data.star = 0
        // 将最新的评论数据渲染到页面上：将返回的数据添加到数据源： commentList 中
        this.commentList.unshift(res.data)
      } else {
        if (!this.$login()) {
          return
        }
        // 发送请求到服务器添加评论回复
        const res = await setCommentsApi({
          content: this.word,
          article: this.id,
          parent: this.mycomment.id
        })
        // 将返回的评论数据添加到评论的回复数据中： children_comments
        this.mycomment.children_comments.push(res.data)
      }
      // 关闭面板
      this.show = false
      // 清除内容
      this.word = ''
    },
    // 打评论面板
    opencomment () {
      this.placeholder = ''
      this.show = true
      // 将标识改为 false：
      this.isReply = false // 说明不评论的回复：是添加评论
    },
    // list 组件的加载事件
    async onload () {
      this.start += this.limit
      // 发送请求到服务器得到评论数据
      const res = await getCommentApi({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      this.commentList.push(...res.data.list)
      this.total = res.data.total
      // 将加载状态改为 false
      this.loading = false
      // 判断所有数据源是否加载完毕
      if (this.commentList.length >= this.total) {
        this.finished = true
      }
    }
  },
  async created () {
    // 得到文章 id
    this.id = this.$route.params.id
    // 根据 id 发送请求到服务器
    var res = await getShareDetailApi(this.id)
    this.detailObj = res.data
  },
  components: {
    comment
  }
}
</script>

<style lang="less" scoped>
.active {
  color: red;
}
.shareDetail {
  background-color: #f7f4f5;
  padding-bottom: 60px;
  h3 {
    padding: 20px 15px;
    font-size: 20px;
    line-height: 1.5em;
    background-color: #fff;
  }
  .author {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    .avatar {
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 6px;
      }
    }
    .msg {
      background-color: #fff;
      font-size: 12px;
      .name {
        color: #676980;
        font-weight: 700;
        margin-bottom: 3px;
      }
      .time {
        color: #c8c8cf;
      }
    }
  }
  .content {
    padding: 20px 15px;
    background-color: #fff;
    font-size: 14px;
    /deep/ img {
      width: 100%;
    }
  }
  .comment {
    background-color: #fff;
    margin-top: 10px;
    padding: 0 15px;
    .title {
      font-size: 18px;
      padding: 20px 0;
      font-weight: 700;
      sup {
        color: #bebec6;
        margin-left: 2px;
      }
    }
  }
  .bottom {
    background-color: #fff;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    .ipt {
      flex: 1;
      background-color: #f7f4f5;
      height: 34px;
      line-height: 35px;
      color: #ccc;
      padding-left: 10px;
    }
    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #ccc;
      text-align: center;
      margin-left: 26px;
      .iconfont {
        font-size: 30px;
      }
    }
  }
  .mybox {
    padding: 25px 15px;
    textarea {
      width: 100%;
      height: 100px;
      border: none;
      background-color: #f7f4f5;
      font-size: 14px;
      padding: 15px;
      box-sizing: border-box;
    }
    .send {
      text-align: right;
      span {
        color: #ccc;
        font-size: 16px;
      }
      .active {
        color: red;
      }
    }
  }
  .sharepop {
    background-color: #00b8d4;
    padding: 15px;
    padding-top: 0px;
    .title {
      font-size: 12px;
      color: #fff;
      text-align: center;
      padding: 10px 0;
    }
    .box {
      background-color: #fff;
      .pageimg {
        text-align: center;
        height: 300px;
        overflow: hidden;
        img {
          width: 300px;
        }
      }
      .logo {
        text-align: center;
        img {
          width: 120px;
          height: 36px;
        }
      }
      .ewm {
        padding: 20px 0;
        /deep/ img {
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
